<template>
  <div class="ke-open-class">
    <ke-title :title="'精选VIP课程'" />
    <ul class="courseList">
      <li v-for="(course, index) in courseList" :key="index">
        <ke-intro :courseName="course.courseName" :buyNumber="course.buyNum" :poster="require('../../assets/images/node.jpg')" />
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'ke-open-class',
  components: {
    keTitle: () => import('../ke-title'),
    keIntro: () => import('../ke-intro')
  },
  data() {
    return {
      courseList: []
    }
  },
  created() {
    this.getLimitCourse()
  },
  methods: {
    getLimitCourse() {
      this.$axios.get('/api/course/limitTimeCourse').then(res => {
        const courseList = res.data.data
        this.courseList = courseList
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
.ke-open-class {
  position: relative;
  width: 1200px;
  margin: 0 auto;
  padding-top: 23px;
  box-sizing: border-box;
  overflow: hidden;

  .courseList {
    height: 484px;
    padding-left: 0;
    overflow: hidden;
    border-top 8px solid #eeeeee
    padding-top 8px
    box-sizing border-box

    li {
      list-style: none;
      float: left;
      width: 240px;
      height: 234px;
      box-sizing: border-box;
      cursor: pointer;
      border: 1px solid transparent;

      &:hover {
        border: 1px solid #dddddd;
      }
    }
  }
}
</style>
